<template>
  <div class="main">
    <canvas ref="ref_canvas"></canvas>
  </div>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, onMounted, reactive, ref} from "vue";
import imggg from './photos/photo (1).png'
const {proxy} = getCurrentInstance()
const state: any = reactive({
  arr: 50,
  itemWidth: 350,
  itemHeight: 500,
  itemGap: 100,
  bgWidth: 0,
  bgHeight: 0,
  isMove: false,
  arrData: [],
  scale: 0,
  column: 10
})
const ref_canvas = ref()
const ref_items = ref()
const init = async () => {
  state.bgWidth = Math.max((state.column > state.arr ? state.arr : state.column) * (state.itemWidth + state.itemGap) - state.itemGap, ref_canvas.value.clientWidth)
  state.bgHeight = Math.max(Math.ceil(state.arr / state.column) * (state.itemWidth + state.itemGap) - state.itemGap, ref_canvas.value.clientHeight)
  state.arrData = []
  for (let i = 0; i < state.arr; i++) {
    let img = new Image();
    img.src = imggg;
    img.onload = () => {
      const col = i % state.column
      const row = Math.floor(i / state.column)
      const x = col * (state.itemWidth + state.itemGap)
      const y = row * (state.itemHeight + state.itemGap)
      const content = ref_canvas.value.getContext("2d")
      state.arrData.push({
        node: img,
        x,
        y
      })
      content.drawImage(img, x, y, state.itemWidth, state.itemHeight)
    }
  }
  initEvent()
}
const initEvent = () => {
  resize()
  window.addEventListener("resize", () => {
    resize();
  })
  ref_canvas.value.addEventListener("mousedown", (e) => {
    state.isMove = true
  });
  ref_canvas.value.addEventListener("mouseup", () => {
    state.isMove = false
  });
  ref_canvas.value.addEventListener("mouseleave", () => {
    state.isMove = false
  });
  ref_canvas.value.addEventListener("mousemove", (e) => {
    if (!state.isMove) {
      return
    }
    move(e.movementX, e.movementY);
  });
}
const resize = () => {
  // 修改canvas宽高以填充满页面
  ref_canvas.value.width = ref_canvas.value.clientWidth;
  ref_canvas.value.height = ref_canvas.value.clientHeight;
  // 修改canvas宽高之后，画布内容会被清除，故需要调用一次move_imgs函数，重新生成所有图片
  if (state.arrData.length > 0) {
    move(0, 0)
  }
}
const move = (x, y) => {
  // 清除content，重新进行绘制
  const content = ref_canvas.value.getContext("2d")
  content.clearRect(0, 0, ref_canvas.value.width, ref_canvas.value.height);
  // 遍历所有图片，对每一张图片进行移动，并进行判断
  state.arrData.forEach(v => {
    v.x += x
    if (v.x > (state.bgWidth - state.itemWidth)) {
      v.x -= (state.bgWidth + state.itemGap)
    }
    if (v.x < -state.itemWidth) {
      v.x += (state.bgWidth + state.itemGap)
    }
    v.y += y
    if (v.y > (state.bgHeight - state.itemHeight)) {
      v.y -= state.bgHeight + state.itemGap
    }
    if (v.y < -state.itemHeight) {
      v.y += state.bgHeight + state.itemGap
    }
    // 绘制图片，更新画布
    content.drawImage(v.node, v.x, v.y, state.itemWidth, state.itemHeight);
  });
}
onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  background-color: #000000;
  overflow: hidden;
  >canvas {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}
</style>
